<template>

  <el-card>
    <menu-nav :list="navList"></menu-nav>

    <div class='app-container' v-if="1==1">
      <div class='tip-div' v-if="user_exam_info.page_tip_enable=='enabled'">
        <div class='tip-content'>
          <span style="white-space: pre-line;" v-html="user_exam_info.page_tip"></span>
        </div>

      </div>
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-row v-for="(item, index) in form.rows" :key="index">
          <div v-if='item.type != `image`'>
            <el-col :span="16">
              <el-form-item :required="item.is_required == 1?true:false" :label="item.name" style='width:100%;' v-if='item.type == `input`'>
                <el-input v-model="item.value"  :placeholder="item.default_value"></el-input>
              </el-form-item>
              <el-form-item :required="item.is_required == 1?true:false" :label="item.name" style='width:100%;' v-if='item.type == `select`'>
                <el-select v-model="item.value" filterable placeholder="请选择">
                    <el-option
                      v-for="(sub_item, sub_index) in item.config_list"
                      :key="sub_index"
                      :label="sub_item"
                      :value="sub_item">
                    </el-option>
                  </el-select>
              </el-form-item>
              <!-- <el-form-item :required="item.is_required == 1?true:false" :label="item.name" style='width:100%;' v-if='item.type == `image`'>
                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="handlerUpload"
                  :before-upload="beforeUpload" :data="{index:index}">
                  <img v-if="item.value" :src="item.value" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <el-input type="hidden" v-model="item.value"></el-input>
                </el-upload>
              </el-form-item> -->
              <el-form-item :required="item.is_required == 1?true:false" :label="item.name" style='width:100%;' v-if='item.type == `file`'>
                <el-upload class="upload-demo" action="#" :show-file-list="true"  :file-list="item.fileList" style="line-height:initial;"
                  :http-request="handlerUploadAttach" :before-upload="beforeUploadFile" :limit="1" :data="{index:index}">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传Pdf文件，且不超过500kb</div>
                  <el-input type="hidden" v-model="item.value"></el-input>
                </el-upload>
              </el-form-item>

              <el-form-item :required="item.is_required == 1?true:false" :label="item.name" style='width:100%;' v-if='item.type == `radio`'>
                <el-radio-group v-model="item.value">
                    <el-radio :label="sub_item" :key="sub_index" v-for="(sub_item, sub_index) in item.config_list">{{sub_item}}</el-radio>
                </el-radio-group>
              </el-form-item>



              <el-form-item :required="item.is_required == 1?true:false" :label="item.name" style='width:100%;' v-if='item.type == `textarea`'>
                <el-input :autosize="{ minRows: 4, maxRows: 6}" type="textarea" v-model="item.value" :placeholder="item.default_value"></el-input>
              </el-form-item>

              <el-form-item :required="item.is_required == 1?true:false" :label="item.name" style='width:100%;' v-if='item.type == `datepicker`'>
                <el-date-picker type='date' v-model="item.value" value-format="yyyy-MM-dd" :placeholder="item.default_value"></el-date-picker>
              </el-form-item>


            </el-col>
            <el-col :span="8" class='item-tips' >
              {{item.tip}}
            </el-col>
          </div>
          <div v-else>
            <el-col :span="8">
              <el-form-item :required="item.is_required == 1?true:false" :label="item.name" style='width:100%;' v-if='item.type == `image`'>
                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="handlerUpload"
                  :before-upload="beforeUpload" :data="{index:index}">
                  <img v-if="item.value" :src="item.value" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <el-input type="hidden" v-model="item.value"></el-input>
                </el-upload>
              </el-form-item>

            </el-col>
            <el-col :span="3">
             </el-col>
            <el-col :span="13" class='item-tips'>
              {{item.tip}}
            </el-col>
          </div>
        </el-row>


        <el-form-item>
          <el-button type="primary" @click="onSubmit" :disabled='user_exam_info.edit_enable == "disabled"'>立即提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </div>
    <el-empty  v-else description="暂未开放"></el-empty>

  </el-card>


</template>

<script>
import {dateCompare,formatTime,adLink} from '@/utils/index'
import http from '@/utils/http'
import api from '@/api_kaowu'
  export default {
    name: 'Userinfo',
    props:['user_exam_info'],

    filters: {
      timeFilter(timestamp) {
        return formatTime(timestamp, '{y}-{m}-{d} {h}:{i}', true)
      },
    },
    data () {
      return {
          navList: [
            { label: '用户信息', href: '/personal/kaowu/userinfo', name: '/personal/kaowu/userinfo', active: true },
          ],
          fileList: [],

          form: {
            rows:[]
          },

      }
    },
    computed: {
        basic () {
            return this.$store.state.resume.basic
        }
        // contact () {
        //     return this.$store.state.resume.contact
        // },
        // intentionList () {
        //     return this.$store.state.resume.intention_list
        // }
    },
    watch: {
        basic: {
            deep: true,
            handler: function () {
                let basic = this.$store.state.resume.basic

                let dateInstance = new Date()
                let current_date = dateInstance.getFullYear() + '-' + (dateInstance.getMonth() + 1) + '-' + dateInstance.getDate()

                let resume_complete_notice_date = localStorage.getItem('web_resume_complete_notice_date')
                if (basic.complete_percent < this.$store.state.config.apply_job_min_percent && dateCompare(resume_complete_notice_date, current_date) != 'eq') {
                    this.showLowPop = true
                    localStorage.setItem('web_resume_complete_notice_date', current_date)
                }
                if (this.showLowPop === false) {
                    let resume_refresh_notice_date = localStorage.getItem('web_resume_refresh_notice_date')
                    if (dateCompare(resume_refresh_notice_date, current_date) != 'eq') {
                        this.showRefreshPop = true
                        localStorage.setItem('web_resume_refresh_notice_date', current_date)
                    }
                }
            }
        }
    },
    created () {
      this.initInfo()
    },
    methods:{
        onSubmit() {
          const insertData = { ...this.form }
          http.post(api.set_kaowu_user_common_info,insertData)
              .then(res => {
                this.$message.success(res.message)
              })
              .catch(err => {
                  console.log(err)
              })

        },
        handlerAdClick(item){
            adLink(item)
        },
        // 初始化数据
        initInfo () {
            this.get_kaowu_user_common_info();
            // this.getUserInitInfo();
        },
        get_kaowu_user_common_info(){
          http.post(api.get_kaowu_user_common_info,{})
              .then(res => {
                this.form.rows = res.data.kaowu
              })
              .catch(err => {
                  console.log(err)
              })
        },

        getUserInitInfo(){
          http.post(api.getUserInitInfo,{})
              .then(res => {
                this.user_exam_info = res.data
                console.log(res)
              })
              .catch(err => {
                  console.log(err)
              })
        },
        // 上传附件简历文件之前验证格式及大小
        beforeUploadFile(file) {
          // let fileRaw = file;
          // let fileTypeArr = (fileRaw.type || '').split('/');
          let fileArr = file?.name.split(".");
          let fileType = fileArr[fileArr.length - 1]
          let typeArr = ['txt', 'html', 'pdf', 'doc', 'docx'];
          if (-1 === typeArr.indexOf(fileType)) {
            this.$message.error('文件类型不支持');
            return false;
          }
             console.log(file)
          const sizeLimit = file.size / 1024 / 1024 > 10;
          if (sizeLimit) {
            this.$message.warning('上传文件大小不能超过 10MB!');
            return false;
          }
        },
        //上传附件
        handlerUploadAttach(file) {
          var that = this;
          var index = file.data.index
          this.fileLoading = true
          http.postFormData(api.uploadFile, {
              file: file.file
            })
            .then(res => {
              if (parseInt(res.code) === 200) {
                that.form.rows[index].value = res.data.file_url
              }
            })
            .catch(err => {
              console.log(err);
              this.fileLoading = false
            });
        },
        // 上传头像之前验证格式及大小
        beforeUpload(file) {
          let fileRaw = file
          console.log('beforeUpload fileRaw')
            console.log(fileRaw)
          let fileTypeArr = (fileRaw.type || '').split('/')
          let fileType = fileTypeArr[1]
          let typeArr = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
          if (-1 === typeArr.indexOf(fileType)) {
            this.$message.error('文件类型不支持')
            return false
          }

          if (fileRaw.size > this.$store.state.config.fileupload_size * 1024) {
            let size = this.$store.state.config.fileupload_size / 1024
            size = size.toFixed(1)
            this.$message.error('文件大小超出限制，最大' + size + 'mb')
            return false
          }
        },
       // 上传头像
       handlerUpload(file) {
         var that = this;
         var index = file.data.index

         http.postFormData(api.uploadFile, {
           file: file.file
         }).then(res => {
           if (parseInt(res.code) === 200) {
             that.form.rows[index].value = res.data.file_url
           }
         }).catch(err => {
           console.log(err)
         })
       },
       handleExceed(files){
         console.log(files)
         if(files.length > 1){
           this.$message.warning(`暂不支持多选`);
         }

       }

    }
  }
</script>

<style lang="scss" scoped>
  .tip-div{padding:15px;background-color: #fafafa;width: 100%;min-height: 80px;line-height:20px;border-left:5px solid red;margin-bottom:30px;}
  .item-tips{white-space: pre-wrap;color:red;line-height:20px;}
  .tip-content{
    white-space:pre-wrap;
    color:red;
    font-size:16px;
    line-height:24px;
  }
  .app-container{background:#fff;overflow:auto;}
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
